<template>
  <div class="nav">
    <el-menu
      default-active="2"
      class="mynav"
      :router="true"
      background-color="#0d2439"
      text-color="#fff"
      active-text-color="#69b3ff"
      unique-opened
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="iconfont icon-panel"></i>
          <span>首页</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/home/dashboard">仪表盘</el-menu-item>
          <el-menu-item index="/home/data">设备数据</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="iconfont icon-luyouqi"></i>
          <span>网关</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/device/gateway">网关</el-menu-item>
          <el-menu-item index="/device/group">设备群组</el-menu-item>
           <el-menu-item index="/device/sensor">传感器列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Sidebar",
};
</script>

<style scoped lang="scss">
.iconfont {
  font-size: 18px;
  padding-right: 5px;
}
.nav {
  width: 167px;
  height: 100%;
  background: rgb(13, 36, 57);
  //   color: #fff;
  overflow: hidden;
  .mynav {
    width: 167px;
  }
}
</style>